<script setup name="App">
    import { ref,reactive, watch } from 'vue'
    var geyao=ref({
        name:'geyao',
        age:18,
        sex:'男'
    }
    )
    const handleChange=()=>{
        console.log(11111)
        geyao.value={
            name:'fangfang',
            age:19,
            sex:'女'
        }
    }
    const handleclick=()=>{
        // console.log(geyao)
        geyao.value.push({
            name:'geyao',
            age:18,
            sex:'男'
        })
    }
    // 可以定义基本数据类型 也可以去定义复杂数据类型 工作中其实常用还是ref
    watch(()=>geyao.value.name,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },{deep:true})

    watch(()=>geyao.value.age,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },{deep:true})
    // reactive默认开启了深度监听
    // ref改变同一个对象的属性时候 newValue,oldValue是一个值
    // ref修改整个对象的时候 
    //reactive监听的属性 不是对象的时候就需要()=>{return xxxxx}
    // reactive监听的属性 是对象时候 需要xxx.属性
    </script>
    
    <template>
        <!-- <div v-for="item in geyao">{{ item.name }}-{{item.age}}</div> -->
          <div>{{ geyao.name }}</div>
         <div>{{ geyao.age }}</div> 
         <!-- <div>{{ geyao.learning.math }}</div>
         <div>{{ geyao.learning.english }}</div>  -->
        
         <!-- <button @click="name='geyaosinice'">修改姓名</button>
         <button @click="age=19">修改年龄</button>
         <button @click="sex='女'">修改性别</button> -->
         <!-- <button @click="geyao.age++">修改属性</button> -->
         <!-- <button @click="handleclick">修改深度</button> -->
         <button @click="handleChange">修改整个对象</button>
         <!-- <button @click="obj.age=19">修改年龄</button>
         <button @click="obj.sex='女'">修改性别</button> -->
    </template>
    
    <style scoped>
    
    </style>
    
    
    
    
    